<template>
  <el-card>
    <!-- 标题 -->
    <template #header>
      <h2>{{paper.papername}}-{{paper.classname}}</h2>
    </template>
    <el-card style="margin-bottom:10px"
    v-for="(ol,index) in paper.outlines" :key="ol._id">
      <template #header>
        <span>{{index+1}}.{{ol.outlinename}}</span>
      </template>

      <el-radio-group v-model="ol.answer">
        <el-radio v-for="item in paper.items" :key="item._id" :label="item.itemname">
          {{item.itemname}}
        </el-radio>
      </el-radio-group>
    </el-card>
    <div style="margin:10px">
      <el-button type="primary" @click="save">提交</el-button>
    </div>
  </el-card>
</template>

<script>
export default {
  props: ['id'],
  data() {
    return {
      paper: {
        outlines: [],
      },
    };
  },
  computed: {
    flag() {
      for (let i = 0; i < this.paper.outlines.length; i += 1) {
        if (!this.paper.outlines[i].answer) {
          return i + 1;
        }
      }
      return true;
    },
  },
  created() {
    this.getPaper();
  },
  methods: {
    async save() {
      if (localStorage.getItem(`paperId-${this.id}`)) {
        this.$message('您已经作答过了');
        return;
      }
      if (this.flag !== true) {
        this.$message(`${this.flag}未填写`);
        return;
      }
      const data = await this.apis.addAnswers({
        paperId: this.id,
        outlines: this.paper.outlines,
        items: this.paper.items,
      });
      if (data) {
        localStorage.setItem(`paperId-${this.id}`, true);
        this.$router.push({
          name: 'HomeAnswers',
        });
      }
    },
    async getPaper() {
      const { data } = await this.apis.getPaper(this.id);
      this.paper = data;
    },
  },
};
</script>
